<template>
  <el-dialog v-model="dialogFormVisible" :title="cTitle" style="width: 30%" @opened="open" @close="close">
    <el-form :model="addForm" :rules="addRules" ref="formRef">
      <el-form-item label="分类名称"  prop="cate_name">
        <el-input v-model="addForm.cate_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类别名"  prop="cate_alias">
        <el-input v-model="addForm.cate_alias" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-onceClick="10000" @click="submitForm(formRef)">提交</el-button>
        <el-button @click="close">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reactive, ref, watch } from "vue";
import {getArticleListMsg, addArticleMsg, changeArticleMsg} from '@/api'
import {ElMessage} from "element-plus";
export default {
  name: "VIndex",
  props:['title', 'isShow', 'id'],
  setup(props, context){
    // 状态
    let cTitle = ref('')
    let dialogFormVisible = ref(false)
    let addForm = reactive({
        cate_name: '',
        cate_alias: ''
      })
    let addRules = reactive({
      cate_name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
        { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
      ],
      cate_alias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
      ]
    })
    const formRef = ref(null)

    // 方法
    let open = async () => {
      cTitle.value = props.title
      if (props.title === '修改分类') {
        const { data } = await getArticleListMsg({id: props.id})
        addForm.cate_alias = data.cate_alias
        addForm.cate_name = data.cate_name
      }
    }

    let close = () => {
      formRef.value.resetFields()
      context.emit('closeDialog')
    }

    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          if (props.title === '添加分类'){
            const res = await addArticleMsg(addForm)
            ElMessage.success(res.message)
            context.emit('getArticleList')
            close()
          } else if (props.title === '修改分类'){
            addForm.id = props.id
            const res = await changeArticleMsg(addForm)
            ElMessage.success(res.message)
            context.emit('getArticleList')
            close()
          }
        } else {
          console.log('error submit!', fields)
        }
      })

    }

    // watch
    watch(() => props.isShow, (a) => {
      dialogFormVisible.value = a
    })


    return{
      addForm,
      addRules,
      dialogFormVisible,
      cTitle,
      open,
      close,
      submitForm,
      formRef
    }
  }
}
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-input {
  width: 100%;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
